<!-- 学生管理 -->

<template>
  <div>
    <div class="header-menu">
      <div style="display: flex; width: 50%;">
          <el-input placeholder="搜索学生" v-model="keyword" @clear="inputListener" clearable>
        </el-input>
        <el-button :icon="Search" slot="append" type="primary" @click="searchStudent" >搜索</el-button>
      </div>
      <div style="display: flex; width: 30%;">
          <el-select v-model="value1" placeholder="年级" @change="queryClass" @clear="gradeListener" clearable>
          <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select v-model="value2" placeholder="班级" @change="queryStudentByClass" @clear="classListener" clearable>
          <el-option v-for="item in classNo" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
    </div>
    <!-- 数据显示 -->
    <el-table :data="studentData" size="mini" :stripe="true" :highlight-current-row="true" style="height: 600px">
      <el-table-column label="序号" type="selection"></el-table-column>
      <el-table-column prop="studentNo" label="学号" fixed width="100"></el-table-column>
      <el-table-column prop="realname" label="姓名" fixed width="100"></el-table-column>
      <el-table-column prop="username" label="昵称" fixed width="100"></el-table-column>
      <el-table-column prop="grade" label="年级" fixed width="100"></el-table-column>
      <el-table-column prop="classNo" label="班级" fixed width="100"></el-table-column>
      <el-table-column prop="age" label="年龄" fixed width="80"></el-table-column>
      <el-table-column prop="telephone" label="电话" fixed width="100"></el-table-column>
      <el-table-column prop="email" label="邮件" fixed width="150"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>

      <el-table-column prop="operation" label="操作">
        <template #default="scope">
          <el-button type="danger" size="mini" @click="deleteById(scope.$index, scope.row)">删除</el-button>
          <el-button type="primary" size="mini" @click="editById(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出表单编辑学生 -->
    <el-dialog title="编辑学生" v-model="visibleForm">
      <el-form label-position="left" ref="editFormDataRef" label-width="80px" :model="editFormData" :rules="editFormRules">
        <el-form-item label="学号">
          <el-input v-model="editFormData.studentNo" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="username">
          <el-input v-model="editFormData.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="editFormData.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年级" prop="grade">
          <el-input v-model="editFormData.grade" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="classNo">
          <el-input v-model="editFormData.classNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="telephone">
          <el-input v-model="editFormData.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮件" prop="email">
          <el-input v-model="editFormData.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="editFormData.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="editFormData.age" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visibleForm = false">取 消</el-button>
        <el-button type="primary" @click="commit()">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 上一页，当前页，下一页 -->
    <div class="footer-button">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
        :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'

import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();
const store = useStore();
const router = useRouter();

const keyword = ref('');
const studentData = ref([]);
const editFormData = ref({
  studentNo: '',
  username: '',
  realname: '',
  grade: '',
  classNo: '',
  telephone: '',
  email: '',
  address: '',
  age: '',
});
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const value1 = ref(''); // 年级
const value2 = ref(''); // 班级
const grade = ref([
  { value: '01', label: '高一' },
  { value: '02', label: '高二' },
  { value: '03', label: '高三' },
]);
const classNo = ref([]);
const visibleForm = ref(false);
const editFormRules = reactive({
  username: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  grade: [{ required: true, message: "请输入年级", trigger: "blur" }],
  classNo: [{ required: true, message: "请输入班级", trigger: "blur" }],
  telephone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
  email: [{ required: true, message: "请输入邮件", trigger: "blur" }],
  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
  age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
});

onMounted(() => {
  allStudent();
});

const inputListener = () => {
  allStudent();
}

const gradeListener = () => {
  classNo.value = [];
  allStudent();
}

const classListener = () => {
  allStudent();
}

// 查询班级信息
const queryClass = async () => {
  if (value1.value) {
    const result = await proxy.$api.queryClass(value1.value);
    classNo.value.splice(0, classNo.value.length)
    value2.value = "";
    classNo.value = result.map(v => ({ value: v.classNo, label: v.className }));
  }
}

// 根据班级查询学生信息
const queryStudentByClass = async () => {
  const result = await proxy.$api.queryStudentByClass(page.value, value2.value)

        studentData.value = result.records;
        total.value = result.total;
}
const validateForm = () => {
  return new Promise((resolve) => {
    proxy.$refs.editFormDataRef.validate((valid) => {
      resolve(valid);
    });
  });
};
// 编辑更新学生
const commit = async () => {
  const valid = await validateForm();
  if (!valid) {
    ElMessage.error('请输入对应参数');
    return
  }
  await proxy.$api.modifyStudent(editFormData.value.id, editFormData.value)
  ElMessage({ message: "更新成功", type: "success" });
        allStudent();
        visibleForm.value = false;
}

// 查询所有学生
const allStudent = async () => {
  const result = await proxy.$api.allStudent(page.value);
  
        studentData.value = result.records;
        total.value = result.total;
}

// 关键字查询学生
const searchStudent = async () => {
  const result = await proxy.$api.searchStudent(keyword.value);
  studentData.value = result.records;
        total.value = result.total;
        ElMessage({ message: "查询成功", type: "success" });
}

// 根据id删除学生
const deleteById = async (index, row) => {
  await proxy.$api.deleteStudentById(row.id);
  studentData.value.splice(index, 1);
        ElMessage({ message: "删除成功", type: "success" });
}

function editById(index, row) {
  visibleForm.value = true;
  editFormData.value.id = row.id;
  editFormData.value.studentNo = row.studentNo;
  editFormData.value.username = row.username;
  editFormData.value.realname = row.realname;
  editFormData.value.grade = row.grade;
  editFormData.value.classNo = row.classNo;
  editFormData.value.telephone = row.telephone;
  editFormData.value.email = row.email;
  editFormData.value.address = row.address;
  editFormData.value.age = row.age;
}

function handleSizeChange() { }

function handleCurrentChange(v) {
  page.value = v;
  allStudent();
}
</script>

<style lang="less" scoped>
.footer-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.el-input-group {
  width: 40%;
}

.header-menu {
  margin-bottom: 5px;
  padding: 0;
  text-align: left;
  margin-bottom: 5px;
}
</style>
